<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Triangle Test</title>
<!--
<link rel="StyleSheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2/ext-all.js"></script>
-->
<!--
<link rel="StyleSheet" type="text/css" href="/ext-4.0.1/resources/css/ext-all.css">
<script type="text/javascript" src="/ext-4.0.1/ext-all.js"></script>
-->
<script type="text/javascript">
/*
Ext.onReady(function(){
	var ct = Ext.get('container');
});
*/
</script>
<style type="text/css">
body {
	background-color: skyblue;
}


.triangle {
	position: absolute;
	top: -13px;
	left: 5px;
	width: 0;
	height: 0;
	border: 13px transparent solid;
	border-right-color: #EEE;
}
.triangle-shadow {
	position: absolute;
	top: -16px;
	width: 0;
	height: 0;
	border: 16px transparent solid;
	border-right-color: #111;
}

.triangle-ct {
	top: 19px;
	left: -19px;
	width: 20px;
	height: 20px;
	position: absolute;
}

#message {
	position: absolute;
	top: 100px;
	left: 200px;
	width: 200px;
	height: 100px;
	padding: 10px;
	background-color: 
}


.tip {
	position: absolute;
}
.tip div {
	position: absolute;
}
</style>
</head>
<body>
<div id="container" style="width: 500px;">
i am container

	<div id="message">
		<div>Refresh</div>
		<div class="triangle-ct">
			<div class="triangle-shadow"></div>
			<div class="triangle"></div>
		</div>
	</div>

	<div class="tip" style="left: 300px; top: 60px; background-color: #2A2A2A; border: 1px solid white; padding: 7px 9px;">
		<div style="position: static; color: white;">Refresh</div>
		<div style="top: -6px; font-size: 75%; left: 33px;">
			<div style="
				border: 6px solid transparent;
				border-bottom-color: white;
				border-top-width: 0;

				top: 0;
				left: -6px;
			"></div>
			<div style="
				border: 5px solid transparent;
				border-bottom-color: #2A2A2A;
				border-top-width: 0;

				top: 1px;
				left: -5px;
			"></div>
		</div>

		<div style="top: -17px; font-size: 75%; left: 63px;">
			<div style="
				border: 17px solid transparent;
				border-bottom-color: white;
				border-top-width: 0;

				top: 0;
				left: -6px;
			"></div>
			<div style="
				border: 16px solid transparent;
				border-bottom-color: #2A2A2A;
				border-top-width: 0;

				top: 1px;
				left: -5px;
			"></div>
		</div>
	</div>

	<div style="position: absolute; left: 10px; top: 260px; width: 500px; height: 60px; background-color: green; border: 1px solid white;">
		<div style="
			left: 0;
			position: absolute;
			border: 6px solid transparent;
			border-top-color: black;
			border-bottom-width: 0;
		"></div>
		<div style="
			left: 20px;
			position: absolute;
			border: 6px solid transparent;
			border-top-color: black;
		"></div>
		<div style="
			top: -6px;
			left: 40px;
			position: absolute;
			border: 6px solid transparent;
			border-top-color: black;
		"></div>

		<div style="
			top: -40px;
			left: 60px;
			position: absolute;
			border: 20px solid transparent;
			border-bottom-color: white;
		"></div>
		<div style="
			top: -38px;
			left: 61px;
			position: absolute;
			border: 19px solid transparent;
			border-bottom-color: green;
		"></div>

		<div style="
			top: -26px;
			left: 120px;
			position: absolute;
			border: 26px solid transparent;
			border-bottom-color: white;
			border-top-width: 0;
		"></div>
		<div style="
			top: -25px;
			left: 121px;
			position: absolute;
			border: 25px solid transparent;
			border-bottom-color: green;
			border-top-width: 0;
		"></div>

	</div>

</div>
<div id="footer" style="font-size: 80%; width: 90%; bottom: 0px; position: fixed; padding: 5px;"><a href="http://franks543.blogspot.com/" target="_blank">Frank的五四三</a></div>
</body>
</html>

